<template>
  <div>
    <hr style="border: none">
    <div>
      <hr style="border: none">
      <el-form :inline="true" :model="queryForm.data" class="demo-form-inline">
        <el-form-item>
          <el-input clearable v-model="queryForm.data.typeName" placeholder="类型名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model="queryForm.data.typeCode" placeholder="类型代码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model="queryForm.data.itemName" placeholder="字典名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryFormSubmit()" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="small" @click="$router.push({ name: 'sys-dic-add-or-update'})"
                 icon="el-icon-plus">添加
      </el-button>
      <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete"
                 :disabled="this.multipleSelection.length?false:true">批量删除
      </el-button>
    </div>
    <hr>
    <div>
      <el-table :data="tableData" v-loading="loading" style="width: 100%" ref="multipleTable"
                @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="字典代码" prop="itemCode"></el-table-column>
        <el-table-column label="字典名称" prop="itemName"></el-table-column>
        <el-table-column label="类型代码" prop="typeCode"></el-table-column>
        <el-table-column label="类型名称" prop="typeName"></el-table-column>
        <el-table-column label="排序码" prop="sort"></el-table-column>
        <el-table-column label="备注" prop="remarks"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200" prop="id">

          <template slot-scope="scope">
            <el-button size="small" type="danger" @click="deleteItem(scope.$index, scope.row)"
                       icon="el-icon-delete">删除
            </el-button>
            <el-button size="small" type="primary"
                       @click="$router.push({name:'sys-dic-add-or-update',params:{id:scope.row.id}})"
                       icon="el-icon-edit">修改
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pages.currentPage" :page-sizes="pages.pageSizeList"
                     :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total"
                     prev-text="上一页"
                     next-text="下一页" background>
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        loading: false,
        url: {
          queryPage: '/sysDict/query/page',
          delete: '/sysDict/delete',
          deleteBatch: '/sysDict/deleteBatch'
        },
        pages: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
          pageSizeList: [2, 20, 40, 100]
        },
        tableData: [],
        queryForm: {
          dialogFormVisible: false,
          data: {
            currentPage: 1,
            pageSize: 10,
            id: '',
            itemCode: '',
            itemName: '',
            typeCode: '',
            typeName: '',
            sort: '',
            remarks: ''
          }
        },
        multipleSelection: []
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = []
        val.forEach(item => {
          this.multipleSelection.push(item.id)
        })
      },
      handleSizeChange: function (val) {
        this.pages.pageSize = val
        this.queryFormSubmit()
      },
      handleCurrentChange: function (val) {
        this.pages.currentPage = val
        this.queryFormSubmit()
      },
      deleteBatch () {
        this.$confirm('此操作将删除字典, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(this.$http.adornUrl(this.url.deleteBatch), {params: {ids: this.multipleSelection.join(',')}}).then(
            () => {
              this.$message({
                type: 'success',
                message: '删除成功!',
                duration: 1500,
                onClose: () => {
                  this.queryFormSubmit()
                }
              })
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 加载列表页
      queryFormSubmit: function () {
        this.loading = true
        this.queryForm.data.currentPage = this.pages.currentPage
        this.queryForm.data.pageSize = this.pages.pageSize
        this.$http
          .get(this.$http.adornUrl(this.url.queryPage), {
            params: this.queryForm.data
          })
          .then(({data}) => {
            this.loading = false
            this.tableData = data.list
            console.log(this.tableData, 'tableData')
            this.pages.total = data.total
          })
      },
      // 删除角色
      deleteItem: function (index, row) {
        this.$confirm('此操作将删除字典' + row.itemName + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$http
              .get(this.$http.adornUrl(this.url.delete), {
                params: {id: row.id}
              })
              .then(
                () => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!',
                    duration: 1500,
                    onClose: () => {
                      this.queryFormSubmit()
                    }
                  })
                }
              )
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    activated: function () {
      this.queryFormSubmit()
    }
  }
</script>

<style scoped>
</style>
